const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})

const data ={
    point: [113.87343285, 22.55626015],
    line: [[ 113.87158, 22.55478 ], [113.8734, 22.55657], [ 113.87483, 22.55507 ]],
    polygon: [[[ 113.8715, 22.5549 ], [ 113.8732, 22.5565 ], [ 113.8745, 22.555 ], [ 113.8726, 22.5536 ], [ 113.8715, 22.5549 ] ] ]
}
let features = []
for(let type in data) {
    const coords = data[type]
    let geom = null
    if(type === 'line') {
        geom = new ol.geom.LineString(coords)
    } else if (type === 'polygon') {
        geom = new ol.geom.Polygon(coords)
    } else {
        geom = new ol.geom.Point(coords)
    }
    geom.transform('EPSG:4326', 'EPSG:3857')
    features.push(new ol.Feature(geom))
}

const source = new ol.source.Vector({
    features: features,
});

const vecLayer = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255,0,0,0.4)'
            })
        }),
        stroke: new ol.style.Stroke({
            color: '#ff0000',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.4)'
        })
    })
})


var map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([113.87343285, 22.55626015]),
        zoom: 18,
        projection: 'EPSG:3857'
    })
});

map.addLayer(vecLayer)